import { useStores } from '@/stores';
import { Pagination, Table, Tooltip } from 'antd';
import { observer } from 'mobx-react-lite';
import { FC, Ref, useEffect, useImperativeHandle, useState } from 'react';

import './index.less';
import { Sheet } from '@/typings/global';
import { runInAction } from 'mobx';
import { UNIT_TO_M } from '@/utils/constant';

interface SheetTableConf {
  onRef: Ref<unknown> | undefined;
  onSubmit: (sheetInfo: any) => void;
}
// 这个页面根据业务来自行设计吧
const SheetTable: FC<SheetTableConf> = (SheetTableProps: SheetTableConf) => {
  const { lotStore, commonStore } = useStores();
  const [currentSheetId, setCurrentSheetId] = useState<number>(lotStore.sheet.sheetId);

  // [lot-detail] 片列表的头部
  const SHEET_LIST_COLUMNS = [
    { title: '编号', dataIndex: 'sheetId', key: 'sheetId', width: 90, fixed: 'left' },
    {
      title: 'PanelID',
      dataIndex: 'panelId',
      key: 'panelId',
      width: 280,
      ellipsis: { showTitle: false },
      render: address => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      )
    },
    { title: '片的生成时间', dataIndex: 'postScreenTime', key: 'postScreenTime', width: 140 },
    { title: 'POL缺陷数', dataIndex: 'polFlawCount', key: 'polFlawCount', width: 80 },
    { title: '偏贴后缺陷数', dataIndex: 'paintiehouFlawCount', key: 'paintiehouFlawCount', width: 90 }
  ];

  /**
   * 缺陷卡片页数改变事件
   * @param page
   */
  const onChangePage = async page => {
    lotStore.sheet.currentPage = page;
    lotStore.changeSheetListReq(lotStore.lotId, commonStore);
  };

  const onRowClick = (record: any, index) => {
    SheetTableProps.onSubmit(record);
    // setIndexActive(index);
    runInAction(() => {
      lotStore.sheet.sheetId = record.sheetId;
      lotStore.sheet.sheetInfo = record;
      lotStore.sheet.headMd = record.doffMd ? record.doffMd / UNIT_TO_M : 0;
      lotStore.sheet.flawSum = record.flawCount;
    });
  };

  useEffect(() => {
    setCurrentSheetId(lotStore.sheet.sheetId);
  }, [lotStore.sheet.sheetId]);

  return (
    <div className="sheet-table">
      <Table
        rowKey={record => record.sheetId}
        className={`lp-table-header-smaller lp-table-content-smaller sub-sheet-table`}
        dataSource={lotStore.sheetListTable as unknown as Sheet[]}
        columns={SHEET_LIST_COLUMNS as any}
        pagination={false}
        scroll={{ x: 200, y: 670 }}
        rowClassName={(record: any, index) => {
          if (record.sheetId == currentSheetId) {
            return 'is-active-row';
          }
          return 'scroll' + index;
        }}
        onRow={(record, index) => {
          return {
            onClick: () => onRowClick(record, index)
          };
        }}
      />

      <div className="papgation">
        {/*  showQuickJumper跳转到第几页-----暂时不做这个功能 */}
        <Pagination
          showSizeChanger={false}
          current={lotStore.sheet.currentPage}
          total={lotStore.sheet.total}
          onChange={onChangePage}
          showTotal={() => `总数:${lotStore.sheet.total}`}
          pageSize={lotStore.sheet.pageSize || 16}
        />
      </div>
    </div>
  );
};
export default observer(SheetTable);
